<template>
  <div>
    <div class="title">Index</div>
    <!-- <img src="/imgs/1.jpeg" alt="" />
    <img src="~/assets/imgs/5.png" alt="" /> -->
    <div v-if="pending">loading...</div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>

    <p>{{ count }}</p>
    <button @click="count++">按钮</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Index",
};
</script>

<script lang="ts" setup>
const count = useCount();

useHead({
  title: "首页",
});

const users = ref<any>([]);

const { data, error, pending } = useFetch("/api/users", {
  // lazy: true,
  // server: true,
});

if (error.value) {
  console.log(error.value);
}

if (data.value) {
  users.value = data.value.data;
}

// const { data, error, refresh } = useFetch("/api/users");

// if (error.value) {
//   console.log(error.value);
// }

// if (data.value) {
//   console.log(data.value);
//   users.value = data.value.data;
// }
</script>

<style scoped lang="scss">
.title {
  color: $color-1;
}
</style>
